<template>
  <div class="main">
    <div class="container">
      <div class="child1">Child 1 (6份)</div>
      <div class="child2">Child 2 (18份)</div>
    </div>
    <div class="-item-main" :key="index" v-for="(itemArray,index) in list">
      <div class="-item" :style="setSpan(item)" :key="index" v-for="(item,index) in itemArray">
        {{ item.name}}
        {{ setSpan(item)}}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "testB",
  computed:{
    setSpan:()=>{
      return (item)=>{
        let span = {flex:+item.configure.span};
        return span;
      }
    }
  },
  data() {
    return {
      "list" : [
        [
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "主键",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 12,
              "styles" : "",
              "display" : false
            },
            "id" : "id",
            "key" : "gthh_58"
          },
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "商品名称",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 12,
              "styles" : ""
            },
            "id" : "goods_name",
            "key" : "gthh_54"
          },
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "商品规格",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 12,
              "styles" : ""
            },
            "id" : "goods_specification",
            "key" : "gthh_55"
          }
        ],
        [
          {
            "itemValue" : "",
            "name" : "商品价格",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 18,
              "styles" : ""
            },
            "id" : "goods_price",
            "key" : "gthh_52"
          },
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "库存数量",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 6,
              "styles" : ""
            },
            "id" : "goods_number",
            "key" : "gthh_53"
          }
        ],
        [
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "购买限制",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 12,
              "styles" : "",
              "display" : true
            },
            "id" : "goods_buy_max_number",
            "key" : "gthh_58"
          },
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "加购信息",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 12,
              "styles" : ""
            },
            "id" : "goods_buy_more_info",
            "key" : "gthh_54"
          },
          {
            "value" : {
              "type" : "group"
            },
            "itemValue" : "",
            "name" : "商品备注",
            "icon" : "icon-zu",
            "configure" : {
              "type" : "default",
              "marginTop" : 0,
              "marginBottom" : 16,
              "icon" : "",
              "span" : 12,
              "styles" : ""
            },
            "id" : "goods_note",
            "key" : "gthh_55"
          }
        ]
      ],
    }
  }
}

</script>

<style scoped lang="less">
.container {
  display: flex;
}

.child1 {
  border: 1px solid red;
  flex: 6;
}

.child2 {
  border: 1px solid red;
  flex: 18;
}
.main{
  border: 1px solid red;
  width: 100%;
  height: 100%;

  .-item-main{
    display: flex;
    margin: 10px;
    border: 1px solid red;
    //padding: 10px;
    .-item{
      border: 1px solid red;
      margin: 10px;
      //flex: 2;
    }
  }
}

</style>
